<template>
    <div align="center">
        <div class="tableTitle">
            <ul class="list elective-list">
                <li>必修</li>
                <li>限选</li>
                <li>任选</li>
            </ul>
            <el-select v-model="selectedWeek">
                <el-option v-for="week in weeks" :key="week" :label="`第 ${week} 周`" :value="week">
                </el-option>
            </el-select>
        </div>
        <div class="courseTable" :style="{ width: props.width, height: props.height }">
            <div class="titleLine">
                <div class="titleItem" id="leadingTitle">周/节次</div>
                <div class="titleItem" v-for="day in 7" :key="day">{{ weekDays[day] }}</div>
            </div>
            <div class="courseLine" v-for="order in 5" :key="order">
                <div class="courseItem" id="leadingCourse">
                    <div style="font-size: 12px; color: gray;">
                        {{ orders[order] }}<br>
                        ({{ 2 * order - 1 }}~{{ 2 * order }}小节)
                    </div>
                </div>
                <div class="courseItem" v-for="day in 7" :key="day">
                    <CourseItem :course="courseList[exists(day, order)]" v-if="exists(day, order) != -1"
                        :show-teacher="showTeacher"></CourseItem>
                    <div v-else></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { type Course } from '@/models/course';
import CourseItem from './item/CourseItem.vue';
import { ref } from 'vue';
import { onMounted } from 'vue';
import { useCourseStore } from '@/stores';
import { getWeekNumber } from '@/utils/dateUtil';
const weekDays = ['', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
const orders = ['', '第一节', '第二节', '第三节', '第四节', '第五节']
let courseList = ref([] as Course[])
let selectedWeek = ref(getWeekNumber())
const weeks = Array.from({ length: 18 }, (_, index) => index + 1)

const props = defineProps<{
    height?: string,
    width?: string,
    showTeacher: boolean
}>()

onMounted(() => {
    useCourseStore().init().then(
        () => {
            courseList.value = useCourseStore().courses
        }
    )
})
function exists(day: number, order: number) {
    for (let i = 0; i < courseList.value.length; i++) {
        const course = courseList.value[i]
        if (day === course.weekday && order === course.order && course.week.includes(selectedWeek.value)) {
            return i
        }
    }
    return -1
}
</script>
<style>
.courseTable {
    border-top: 0.1px solid rgb(181, 181, 181);
    border-right: 0.1px solid rgb(181, 181, 181);
    padding: 0%;
    display: flex;
    flex-direction: column;
}

.titleLine {
    display: flex;
    width: 100%;
    height: 10%;
}

.titleItem {
    border-left: 0.1px solid rgb(181, 181, 181);
    border-bottom: 0.1px solid rgb(181, 181, 181);
    display: flex;
    flex: 1;
    background-color: rgba(135, 206, 250, 0.15);
    color: gray;
    font-size: 12px;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.courseLine {
    display: flex;
    height: 18.4%;
    width: 100%;
}

.courseItem {
    border-left: 0.1px solid rgb(181, 181, 181);
    border-bottom: 0.1px solid rgb(181, 181, 181);
    flex: 1;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#leadingTitle {
    flex: 0.9;
    display: flex;
    background-color: rgba(180, 206, 250, 0.8);
    color: rgba(0, 0, 255, 0.6);
    font-weight: bold;
}

#leadingCourse {
    flex: 0.9;
}

.tableTitle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    max-height: 50px;
}

.list.elective-list {
    list-style-type: none;
    display: flex;
}

.list.elective-list li {
    display: flex;
    /* 将每个列表项变成 Flex 容器 */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: center;
    /* 水平居中对齐 */
}

.list.elective-list li:nth-child(1)::before {
    content: "•";
    color: rgba(180, 206, 250, 0.8);
    font-size: 50px;
}

.list.elective-list li:nth-child(2)::before {
    content: "•";
    color: rgba(228, 76, 49, 0.5);
    font-size: 50px;
}

.list.elective-list li:nth-child(3)::before {
    content: "•";
    color: rgba(21, 178, 68, 0.5);
    font-size: 50px;
}
</style>